<!--店家管理页-->
<template>
  <el-container>
    <el-header height="8vh" style="padding: 10px 20px;background-color: #fff;overflow:hidden;">
      <span style="line-height: 60px;font-size: 20px;">店家管理</span>
      <el-form :inline="true" style="float: right;margin-top: 10px;">
        <el-form-item label="店家选择" style="width: 220px;">
          <el-select v-model="shopId"
                     placeholder="请选择店家" @change="loadShop">
            <el-option v-for="shop in merchant.shopList"
                       :label="shop.shopName" :value="shop.id"/>
          </el-select>
        </el-form-item>
      </el-form>
    </el-header>

    <el-main style="padding: 0;">
      <el-card style="margin: 20px;">
        <el-descriptions :column="5" border
                         direction="horizontal" size="large">
          <el-descriptions-item span="2"
                                label="店家id">
            {{ shop.id }}
          </el-descriptions-item>
          <el-descriptions-item span="3"
                                label="店家名称">
            {{ shop.shopName || null }}
          </el-descriptions-item>

          <el-descriptions-item label="所在省">
            {{ shop.province?.name || null }}
          </el-descriptions-item>
          <el-descriptions-item label="所在市">
            {{ shop.city?.name || null }}
          </el-descriptions-item>
          <el-descriptions-item label="所在区">
            {{ shop.district?.name || null }}
          </el-descriptions-item>
          <el-descriptions-item label="经度">
            {{ shop.longitude || null }}
          </el-descriptions-item>
          <el-descriptions-item label="纬度">
            {{ shop.latitude || null }}
          </el-descriptions-item>

          <el-descriptions-item label="店家描述"
                                span="3">
            {{ shop.description || null }}
          </el-descriptions-item>
          <el-descriptions-item span="2"
                                label="详细地址">
            {{ shop.address || null }}
          </el-descriptions-item>

          <el-descriptions-item span="2" label="店家logo">
            <el-image v-if="shop?.logoImgUrl"
                      :initial-index="4"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="[shop.logoImgUrl]"
                      :src="shop.logoImgUrl"
                      :zoom-rate="1.2" fit="contain"
                      style="width: 300px; height: 200px"/>
          </el-descriptions-item>
          <el-descriptions-item span="2" label="店家图片">
            <el-image
                v-if="shop?.imgUrlList && shop.imgUrlList.length > 0"
                      :initial-index="4"
                      :max-scale="7"
                      :min-scale="0.2" :preview-src-list="shop.imgUrlList"
                      :src="shop.imgUrlList[0]"
                      :zoom-rate="1.2" fit="contain"
                      style="width: 300px; height: 200px"/>
          </el-descriptions-item>
          <el-descriptions-item span="1"
                                label="店家标签">
            {{ shop.tagNameString || null }}
          </el-descriptions-item>

          <el-descriptions-item span="2"
                                label="联系方式">
            {{ shop.contact || null }}
          </el-descriptions-item>
          <el-descriptions-item span="2"
                                label="营业时间">
            {{ shop.openingHours || null }}
          </el-descriptions-item>
          <el-descriptions-item label="店家状态">
            {{ getShopStatus }}
          </el-descriptions-item>

          <el-descriptions-item label="平台登记时间">
            {{ shop.createTime }}
          </el-descriptions-item>
          <el-descriptions-item label="平均评分">
            {{ shop.avgRating }}
          </el-descriptions-item>
          <el-descriptions-item label="月订单数">
            {{ shop.orderNum  }}
          </el-descriptions-item>
          <el-descriptions-item label="点赞数">
            {{ shop.likes  }}
          </el-descriptions-item>

        </el-descriptions>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";

const merchant = ref({
  shopList: [],
});
const shopId = ref(null);
const shop = ref({});
let tagIdSet = new Set();
const tagList = ref([])
const statusEnum = ref([
  {label:'启用', value: '1'},
  {label:'禁用', value: '0'},
]);

onMounted(() => {
  getMerchant(merchant);
})
const loadShop = () => {
  if (!shopId.value) {
    ElMessage.error('请选择店家');
    return;
  }
  axios.get(BASE_URL + 'v1/show/shop/select',
      {params: {id: shopId.value}})
      .then(res => {
        if (res.data.code === 2000) {
          shop.value = res.data.data[0];
          setShopArea(shop.value);
          setTagNameString(shop.value);
          console.log(shop.value);
        } else {
          ElMessage.error(res.data.msg);
        }
      });
}
const setShopArea = async (item) => {
  item.province = await getArea(item.provinceId);
  item.city = await getArea(item.cityId);
  item.district = await getArea(item.districtId);
}
const getArea = async (id) => {
  let res = await axios.get(BASE_URL + 'v1/show/area/select',
      {params: {id: id}});
  if (res.data.code === 2000) {
    return res.data.data[0];
  } else {
    ElMessage.error(res.data.msg);
  }
}
const setTagNameString = async (shop) => {
  if (shop?.tagIdList == null || shop?.tagIdList.length === 0) {
    return;
  }
  tagIdSet =
      new Set([...tagIdSet, ...shop.tagIdList]);
  if (tagIdSet.size !== tagList.value.length) {
    await updateTagEnum();
  }
  shop.tagNameList = [];
  for (let id of shop.tagIdList) {
    let name = getTagName(id);
    if (!name) {
      continue;
    }
    shop.tagNameList.push(name);
  }
  shop.tagNameString = shop.tagNameList.join(',');
}
const updateTagEnum = async () => {
  let data = {tagIdList: tagIdSet.size ? [...tagIdSet] : []};
  try {
    let res = await axios.get(BASE_URL + 'v1/show/tag/select/ids',
        {
          params: data, paramsSerializer:
              params => qs.stringify(params, {indices: false})
        });
    if (res.data.code === 2000) {
      tagList.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg);
    }
  } catch (error) {
    ElMessage.error(error.message);
  }
}
const getTagName = (id) => {
  if (!tagList.value) {
    return null;
  }
  for (let tag of tagList.value) {
    if (tag.id === id) {
      return tag.label;
    }
  }
  return null;
}
const getShopStatus = computed(() => {
  return cellValueFormatter(shop.value.status, statusEnum);
})
</script>

<style scoped>

</style>